<template>
    <div>
        <!-- 分类页面 -->
        <van-search
            v-model="searchVal"
            placeholder="商品搜索,共239款好物"
            input-align="center"
        />


        <van-sidebar  v-model="activeKey" @change="categoryButton" >
            <van-sidebar-item  v-for="item in list" :key="item.id" :title="item.name">
               </van-sidebar-item> 
        </van-sidebar>




        <div>
            <div class="banner" >
                <img :src="list[listBanner].banner_url" alt="">
                <p>{{list[listBanner].name}}好物</p>
            </div>
                


            <van-grid :border="false" :column-num="3">
                <van-grid-item v-for="itemGoods in listGoods" :key="itemGoods.id" @click="sendData(itemGoods.id)">
                    <van-image :src="itemGoods.wap_banner_url" />
                    <p>{{itemGoods.name}}</p>
                </van-grid-item>
            </van-grid>
        </div>    

        <tabbar></tabbar>

    </div>
</template>

<script>
import {categoryNav,currentaction,goodsList,indexaction} from "@/api/category"
import tabbar from "@/components/tabbar.vue"

export default {
    data() {
        return {
            searchVal:"",
            activeKey:0,
            listBanner:0,
            list:[{banner_url:"http://yanxuan.nosdn.127.net/92357337378cce650797444bc107b0f7.jpg"}],
            listGoods:[],
            
            id:0,
        };
    },
    components:{
        tabbar
    },
    computed: {

    },
    created() {
        

        indexaction().then((res)=>{
            console.log(res);
            this.list = res.categoryList;
            this.id = res.categoryList[0].id

        
            currentaction({
                id:this.id
            }).then((res)=>{
            console.log(res);
                this.listGoods=res.data.currentOne.subList
                
            })
        

        })
         

    },
    mounted() {

    },
    methods: {
       
      categoryButton(index){
        this.listBanner=index,
        this.id = this.list[index].id,
        currentaction({
                id:this.id
            }).then((res)=>{
            console.log(res);
                this.listGoods=res.data.currentOne.subList
            })
      },
      sendData(val){
          this.$router.push({path:"/category/categoryList",query:{val}})
      }
    },
};
</script>
<style lang="scss">
.van-sidebar{
    float: left;
}
.banner img{
    width: 261px;
    height: 109px;
}
</style>
<style scoped lang="scss">

</style>
